<template>
	<navigatorComp title="" bgcColor="none" fontColor="#666666" :isWxHandle="true"></navigatorComp>
	<image class="mine_bgc" src="http://112.124.50.179:8888/imgs/mine/mine_bgc.png" mode="widthFix"></image>

	<view class="mine_info">
		<image class="mine_info_avater" :src="userInfo.headUrl || 'http://112.124.50.179:8888/imgs/default_avater.png'" mode=""></image>
		{{ userInfo.nickname }}
		<image class="mine_info_title" src="http://112.124.50.179:8888/imgs/mine/ordinary_user.png" mode=""></image>
	</view>

	<view class="mine_content" :style="{ height: height + 'px' }">
		<view class="mine_content_tab">
			<up-tabs :current="currentTab" lineWidth="48rpx" lineHeight="6rpx"
				:activeStyle="{ color: '#333333', fontSize: '28rpx' }"
				:inactiveStyle="{ color: '#666666', fontSize: '28rpx' }"
				itemStyle="font-weight: 500;margin-bottom:25rpx;width:150rpx;" lineColor="#F3E0BB" :list="tablist"
				@click="clickTab"></up-tabs>
		</view>
		<view class="mine_empty" v-if="
				(currentTab === 0 && memoryHallList?.length === 0) ||
				(currentTab === 1 && templeList?.length === 0) ||
				(currentTab === 2 && clanList?.length === 0)
			">
			<image src="http://112.124.50.179:8888/imgs/mine/mine_empty2.png" mode=""></image>
			还未创建呢，赶紧去创建吧～
		</view>
		<view class="mine_content_scroll">
			<!-- 纪念馆 -->
			<memoryHallListComp v-if="currentTab === 0" :list="memoryHallList" />
			<!-- 祠堂 -->
			<templeListComp v-if="currentTab === 1" :list="templeList" />
			<!-- 家族族谱 -->
			<clanListComp v-if="currentTab === 2" :list="clanList" />
		</view>

		<view class="mine_content_tab" style="margin-left: 10rpx">
			<up-tabs :current="0" lineWidth="48rpx" lineHeight="6rpx"
				:activeStyle="{ color: '#333333', fontSize: '28rpx' }"
				:inactiveStyle="{ color: '#666666', fontSize: '28rpx' }"
				itemStyle="font-weight: 500;margin-bottom:25rpx;width:150rpx;" lineColor="#F3E0BB"
				:list="tabList2"></up-tabs>
		</view>

		<view class="mine_article_list">
			<mescroll-uni :bottombar="false" :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :height="mesrollHeight + 'px'">
				<view class="mine_empty" v-if="messageList.length === 0">
					<image src="http://112.124.50.179:8888/imgs/mine/message_empty.png" mode=""></image>
					空空如也，期待你的第一篇创作
				</view>
				<view v-else>
					<view class="messageBox" v-for="(item, index) in messageList" :key="index">
						<image class="messageBox_decorate" src="http://112.124.50.179:8888/imgs/home/decoration.png" mode=""></image>
						<view class="userInfo">
							<image :src="userInfo.headUrl || 'http://112.124.50.179:8888/imgs/default_avater.png'" mode="" class="avater">
							</image>
							<view>
								<view class="name">{{ userInfo.nickname }}</view>
								<view class="date">{{ formatTimestamp(item.timestamp) }}</view>
							</view>
						</view>
						<view class="intro">{{ item.publisherSubstance }}</view>
						<view class="imageList" v-if="isArray(item.images)">
							<image :src="ele" alt="" v-for="(ele, i) in item.images" :key="i"
								:style="{ marginBottom: item.images.length >= 4 ? '16rpx' : '' }"
								@click="previewImg(item.images, i)"></image>
						</view>
						<view class="footer">
							<image src="http://112.124.50.179:8888/imgs/home/more.png" alt="" class="more" @click.stop="showMore(item)">
							</image>
							<view class="display_flex">
								<up-icon name="chat" size="48rpx" @click="
										goUrl(
											'/subPages/home/dynamic_detail?item=' +
												JSON.stringify({
													...item,
													publisherHeadUrl: userInfo.headUrl,
													publisherNickname: userInfo.nickname
												})
										)
									"></up-icon>
								<!-- <image src="http://112.124.50.179:8888/imgs/home/info.png" alt=""></image> -->
								<view style="margin-right: 32rpx">{{ item.commentNumber }}</view>
								<!-- <image  src="http://112.124.50.179:8888/imgs/home/like.png" alt=""></image> -->
								<!-- (0:未点赞，1:已点赞，2:点赞过，又取消点赞) -->
								<up-icon name="thumb-up" size="48rpx"
									v-if="item.whetherLike == 0 || item.whetherLike == 2"
									@click="setLike(item, index)"></up-icon>
								<up-icon name="thumb-up-fill" color="#FF4C5A" size="48rpx" v-else
									@click="setLike(item, index)"></up-icon>
								<view>{{ item.likeNumber }}</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
	</view>

	<!-- 按钮弹框 -->
	<u-popup :show="showMoreFunc" bgColor="rgba(0,0,0,0)" @close="closeMore" custom-style="padding:0 16rpx 0;">
		<u-button shape="circle" :custom-style="moreBtnStyle" @click="del">删除</u-button>
		<u-button shape="circle" :custom-style="{ ...moreBtnStyle, fontWeight: 600 }" @click="closeMore">
			取消
		</u-button>
	</u-popup>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import navigatorComp from '/components/navigator/index.vue';
	import memoryHallListComp from './components/memoryHallList.vue';
	import templeListComp from './components/templeList.vue';
	import clanListComp from './components/clanList.vue';
	import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
	import {
		isArray
	} from '@/external/luch-request/utils';
	import {
		formatTimestamp
	} from '../../utils/time';
	import store from '@/store/index.js';
	import {
		previewImg
	} from '@/utils/previewImg.js';
	import _ from 'lodash';
	import MineApi from '@/API/mine/index.js';
	import HomeApi from '@/API/home/index.js';
	const mineApi = new MineApi();
	const homeApi = new HomeApi();

	const {
		mescrollInit,
		downCallback,
		getMescroll
	} = useMescroll(); // 调用mescroll的hook
	const mesrollHeight = ref(0);
	const upOption = {
		page: {
			size: 10 // 每页数据的数量
		},
		noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
		empty: {
			use: false //不显示空图
		}
	};
	const latestId = ref(0); //最后一个元素的id

	const userInfo = reactive({
		nickname: '',
		headUrl: '',
		userId: '',
		growthType: store.state.userInfo.userInfo.growthType //会员类型
	}); //用户信息
	const height = ref(0); //下方白色区域高度
	const tablist = ref([{
			name: `纪念馆(0)	`
		},
		{
			name: `家族祠堂(0)`
		},
		{
			name: `家族族谱(0)`
		}
	]);
	const tabList2 = ref([{
		name: `个人文章(0)`
	}]);
	const currentTab = ref(0); //默认
	const memoryHallList = ref([]); ////纪念馆列表
	const templeList = ref([]); ////祠堂列表
	const clanList = ref([]); //族谱列表
	const messageList = ref([]); //文章列表
	const dynamicTotal = ref(0); //文章总数

	// 更多按钮
	const showMoreFunc = ref(false);
	const moreBtnStyle = {
		height: '120rpx',
		borderRadius: '26rpx 26rpx 26rpx 26rpx',
		backgroundColor: '#fff',
		fontWeight: '400',
		fontSize: '40rpx',
		color: '#007AFF',
		marginBottom: '16rpx'
	};
	let reportedId = ref('');

	onLoad((options) => {
		userInfo.userId = options.userId || uni.getStorageSync('userInfo').userId;
	});

	onMounted(() => {
		// #ifdef APP-PLUS || H5
		uni.createSelectorQuery()
			.select('.mine_info')
			.boundingClientRect((res) => {
				height.value =
					uni.getSystemInfoSync().screenHeight -
					res.height -
					getApp().globalData.bottom -
					getApp().globalData.navHeight -
					uni.upx2px(88); //导航栏高度
				mesrollHeight.value = height.value - uni.upx2px(380);
			})
			.exec();
		// #endif

		// #ifdef MP-WEIXIN
		uni.createSelectorQuery()
			.select('.mine_info')
			.boundingClientRect((res) => {
				height.value =
					uni.getSystemInfoSync().screenHeight -
					res.height -
					getApp().globalData.bottom -
					getApp().globalData.navHeight;

				mesrollHeight.value = height.value - uni.upx2px(380);
			})
			.exec();

		// #endif

		getPersonalHomepageInfo();
	});

	const clickTab = (e) => {
		console.log(e);
		currentTab.value = e.index;
	};

	onShow(() => {
		myDownCallback();
	});

	/**
	 * 获取主页信息
	 */
	const getPersonalHomepageInfo = () => {
		mineApi
			.getPersonalHomepageInfo({
				obtainUserId: userInfo.userId,
				latestId: 0
			})
			.then((res) => {
				if (res.code === 0) {
					userInfo.nickname = res.data.nickname;
					userInfo.headUrl = res.data.headUrl;
					memoryHallList.value = res.data.memorialList || [];
					templeList.value = res.data.hallList || [];
					clanList.value = res.data.genealogyList || [];
					tablist.value = [{
							name: `纪念馆(${memoryHallList.value.length})`
						},
						{
							name: `家族祠堂(${templeList.value.length})`
						},
						{
							name: `家族族谱(${clanList.value.length})`
						}
					];
				}
			});
	};

	/**
	 * 上拉加载
	 */
	const upCallback = (mescroll) => {
		mineApi
			.getPersonalDynamic({
				latestId: latestId.value
			})
			.then((res) => {
				const curPageData = res.data.dynamicSimpleList || []; // 当前页数据
				if (latestId.value == 0) messageList.value = [];
				messageList.value = messageList.value.concat(curPageData);
				if (curPageData.length) {
					latestId.value = curPageData[curPageData.length - 1].dynamicId || 0;
				}
				mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
				
				tabList2.value = [{
					name: `个人文章(${res.data.dynamicTotal})`
				}];
				messageList.value.forEach((item) => {
					item.images = JSON.parse(item.picture);
					item.publisherSubstance = item.content;
				});
			})
			.catch(() => {
				mescroll.endErr(); // 请求失败, 结束加载
			});
	};

	const myDownCallback = (mescroll) => {
		latestId.value = 0;
		downCallback();
	};

	const setLike = _.throttle(function(item) {
		if (item.whetherLike == 1) {
			item.whetherLike = 0;
			homeApi
				.deleteLikeApi({
					dynamicId: item.dynamicId,
					likeType: '1',
					commentId: 0,
					commentCommentId: 0
				})
				.then((res) => {
					item.likeNumber--;
					uni.showToast({
						icon: 'none',
						title: res.msg
					});
				})
				.catch(() => {});
		} else {
			item.whetherLike = 1;
			homeApi
				.likeApi({
					dynamicId: item.dynamicId,
					likeType: '1',
					commentId: 0,
					commentCommentId: 0
				})
				.then((res) => {
					item.likeNumber++;
					uni.showToast({
						icon: 'none',
						title: res.msg
					});
				})
				.catch(() => {});
		}
	}, 1000);

	const del = () => {
		homeApi
			.deleteDynamicApi({
				dynamicId: reportedId.value
			})
			.then((res) => {
				if (res.code === 0) {
					uni.showToast({
						title: '删除成功'
					});
					myDownCallback();
				}
			})
			.catch(() => {
				mescroll.endErr(); // 请求失败, 结束加载
			});
	};

	const goUrl = (url) => {
		uni.navigateTo({
			url: url
		});
	};

	const showMore = (item) => {
		showMoreFunc.value = true;
		reportedId.value = item.dynamicId;
	};

	const closeMore = () => {
		showMoreFunc.value = false;
	};
</script>

<style lang="scss">
	page {
		/* #ifdef H5 */
		padding-top: 0;
		/* #endif */
	}

	.mine_bgc {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.mine_info {
		position: relative;
		padding: 96rpx 0 40rpx 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		font-weight: 500;
		font-size: 32rpx;
		color: #0e0e0e;
		line-height: 38rpx;

		.mine_info_avater {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-right: 24rpx;
		}

		.mine_info_title {
			width: 186rpx;
			height: 66rpx;
			margin-left: 12rpx;
		}
	}

	.mine_content {
		position: relative;
		width: 100%;
		background: #ffffff;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		padding: 32rpx 0;
		box-sizing: border-box;

		.mine_content_tab {
			// margin-left: -30rpx;
		}

		.mine_content_scroll {
			margin: 24rpx 0 36rpx 32rpx;
			// height: 160rpx;
		}

		.mine_empty {
			margin-top: 64rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #969da3;
			line-height: 28rpx;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 230rpx;
				height: 180rpx;
				margin: auto;
				margin-bottom: 32rpx;
			}
		}
	}

	.mine_article_list {
		width: 100%;

		.messageBox {
			margin:24rpx 32rpx;
			background-color: #fff;
			border-radius: 24rpx;
			box-shadow: 0rpx 0rpx 12rpx 4rpx rgba(0, 0, 0, 0.05);
			padding: 32rpx;
			box-sizing: border-box;
			position: relative;

			&:last-child {
				margin-bottom: 0;
			}

			.messageBox_decorate {
				position: absolute;
				top: 0;
				right: 0;
				width: 112rpx;
				height: 138rpx;
			}

			.userInfo {
				display: flex;
				align-items: center;

				.avater {
					width: 72rpx;
					height: 72rpx;
					border-radius: 0;
					margin-right: 16rpx;
					border-radius: 50%;
				}

				.name {
					font-weight: 400;
					font-size: 28rpx;
					color: #0e0e0e;
					line-height: 40rpx;
				}

				.date {
					font-weight: 400;
					font-size: 20rpx;
					color: #666666;
					line-height: 28rpx;
					margin-top: 4rpx;
				}
			}

			.intro {
				margin: 16rpx 0;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #0e0e0e;
				line-height: 33rpx;
				font-style: normal;
				text-transform: none;
			}

			// .imageList{
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: space-between;
			// 	gap:16rpx;

			// 	image{
			// 		width: 196rpx;
			// 		height: 196rpx;
			// 		border-radius: 16rpx 16rpx 16rpx 16rpx;
			// 	}
			// }
			.imageList {
				display: flex;
				flex-wrap: wrap;
				margin-right: -10rpx;

				image {
					width: calc(33.33333% - 10rpx);
					margin-right: 10rpx;
					height: 196rpx;
					border-radius: 16rpx;
				}
			}

			.footer {
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				line-height: 28rpx;
				font-style: normal;
				text-transform: none;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}

				.u-icon {
					margin-right: 8rpx;
				}
			}
		}
	}
</style>